<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>新闻资讯</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/home.css" rel="stylesheet" />
		<link href="../css/customize.css" rel="stylesheet" />
		<link href="../css/modern-unified.css" rel="stylesheet" />
	</head>

	<body>
		<!-- 现代化头部 -->
		<div class="modern-header">
			<button class="modern-back-btn" onclick="mui.back()">
				← 返回
			</button>
			<h1 style="flex:1;text-align:center;margin:0;font-size:20px;">新闻资讯</h1>
			<div style="width:40px;"></div>
		</div>

		<div class="modern-container">
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<div id="newList" class="modern-list">
						<!-- 新闻列表将通过JavaScript动态生成 -->
					</div>
				</div>
			</div>
		</div>

		<script src="../js/request.js"></script>
		<script src="../js/mui.js"></script>
		<script type="text/javascript">
			let pageNum = 1
			let pageSize = 10
			let newsList = []
			let baseUrl = localStorage.getItem("ip")
			
			mui.init({
				pullRefresh: {
					container: "#pullrefresh", //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
					up: {
						height: 10, //可选.默认50.触发上拉加载拖动距离
						auto: false, //可选,默认false.自动上拉加载一次
						contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
						contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
						callback: pullRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					}
				}
			});

			mui.plusReady(function() {

			})

			window.addEventListener('refresh', function(event) {
				pageNum = 1
				pageSize = 10
				newsList = []
				getNewsList();
			});

			window.addEventListener('load', function(event) {
				pageNum = 1
				pageSize = 10
				newsList = []
				getNewsList();
			})

			function pullRefresh() {
				pageNum++
				getNewsList()
			}
			
			//获取新闻列表
			function getNewsList() {
				request.get('/system/article/list', {
						pageNum,
						pageSize
					},
					(data) => {
						if (pageNum == 1) {
							renderNewsList(data.rows)
						} else {
							if (data.total < pageNum * pageSize) {
								mui('#pullrefresh').pullRefresh().refresh(false);
							} else {
								mui('#pullrefresh').pullRefresh().refresh(true);
								renderNewsList(data.rows)
							}
						}

					},
					(error, thrown) => {
						
					}
				);
			}
			
			//渲染新闻列表
			function renderNewsList(rows) {
				newsList = [...newsList, ...rows]
				let inHtml = ""
				for (let i = 0; i < newsList.length; i++) {
					var html = `<div class="news-list-item">
									<img src="${baseUrl+newsList[i].cover}" alt="">
									<div class="modern-list-content">
										<div class="modern-list-title">${newsList[i].title}</div>
										<div class="modern-list-subtitle">${newsList[i].createTime}</div>
									</div>
									<div style="color: #95A5A6;">→</div>
								</div>`
					inHtml += html;
				}
				document.getElementById('newList').innerHTML = inHtml
				var listView = document.getElementById('newList');
				var listItem = document.getElementsByClassName('news-list-item');
				var clickEvent = function(i) {
					listItem[i].addEventListener('tap', function(event) {
						mui.openWindow({
							url: 'newsDetail.html',
							id: 'newsDetail.html',
							createNew: false,
							show: {
								autoShow: true,
							},
							extras: {
								// 传递的数据
								newsId: newsList[i].id
							}
						});

					});
				}
				//第三步就是用for循环，执行上面的clickEvent函数。for循环的循环次数就是列表的条目数量。
				for (var i = 0; i < listView.childElementCount; i++) {
					clickEvent(i);
				}
			}
		</script>
	</body>

</html>